<template>
	<view class="port-select-container">
		<!-- 自定义导航栏 -->
		<ob-navbar
			title="选择目的港"
			:show-back="true"
			background-color="#FFFFFF"
			title-color="#333333"
			:border="true"
		/>




			<!-- 选择国家 -->
			<view class="country-section">
				<view class="section-title">
					<text class="title-text">选择国家</text>
					<text class="title-desc">点击国家查看对应港口</text>
				</view>
				<view class="country-list" v-if="countries.length">
					<view class="country-item" v-for="c in countries" :key="c.id">
						<view class="country-left">
							<view class="country-avatar">{{ (c.name || '').slice(0,1) }}</view>
							<view class="country-info">
								<text class="country-name">{{ c.name }}</text>
								<text class="country-name-en">{{ c.nameEn }}</text>
								<text class="country-sub">{{ c.portCount || 0 }} 个港口</text>
							</view>
						</view>
						<button class="country-btn" @click="chooseCountry(c.id)">选择</button>
					</view>
				</view>
			</view>

		<!-- 当前选择 -->
		<view v-if="selectedPort && !isFirstTime" class="current-section">
			<view class="section-title">
				<text class="title-text">当前目的港</text>
			</view>
			<view class="port-card current-port" @click="confirmSelect(selectedPort)">
				<view class="port-info">
					<text class="port-name">{{ selectedPort.name }}</text>
					<text class="port-code">{{ selectedPort.code }}</text>
					<text class="port-desc">{{ selectedPort.description }}</text>
				</view>
				<view class="port-status">
					<text class="status-icon">✓</text>
					<text class="status-text">当前选择</text>
				</view>
			</view>
		</view>



		<!-- 港口列表 -->
		<view class="port-list-section" v-if="currentCountryId && portList.length > 0">
			<view class="section-title">
				<text class="title-text">{{ isFirstTime ? '请选择目的港' : '其他目的港' }}</text>
				<text class="title-desc">{{ isFirstTime ? '首次使用需要选择目的港' : '点击切换目的港' }}</text>
			</view>

			<!-- 加载状态 -->
			<view v-if="isLoading" class="loading-state">
				<ob-loading :visible="true" text="加载中..." />
			</view>

			<!-- 空状态 -->
			<view v-else-if="portList.length === 0" class="empty-state">
				<ob-empty
					:image="'/static/images/empty-search.png'"
					:title="'暂无可用港口'"
					:description="'请稍后再试'"
				/>
			</view>

			<!-- 港口列表 -->
			<view v-else class="port-list">
				<view
					v-for="port in portList"
					:key="port.id"
					class="port-card"
					:class="{ 'port-selected': selectedPort && selectedPort.id === port.id }"
				>
					<!-- 操作按钮 -->
					<view class="port-action-top">
						<view class="favorite-btn-small" 
							:class="{ 'favorited': isPortFavorited(port.id) }"
							@click="toggleFavorite(port, $event)">
							<text class="favorite-icon">{{ isPortFavorited(port.id) ? '⭐' : '☆' }}</text>
						</view>
						<view class="select-btn-top" @click="goToHomeWithPort(port)">
							<text class="btn-text">选择港口</text>
						</view>
					</view>
					
					<view class="port-info" @click="goToHomeWithPort(port)">
						<view class="port-header">
							<text class="port-name">{{ port.name }}</text>
							<view v-if="port.isHot" class="hot-tag">
								<text class="hot-text">热门</text>
							</view>
						</view>
						<text class="port-code">港口代码：{{ port.code }}</text>
						<text class="port-desc">{{ port.description }}</text>
						<view class="port-features">
							<text v-if="port.hasWarehouse" class="feature-tag">仓储服务</text>
							<text v-if="port.hasCustoms" class="feature-tag">海关服务</text>
							<text v-if="port.fastShipping" class="feature-tag">快速物流</text>
						</view>
					</view>
				</view>
			</view>
		</view>

			<!-- 热门港口 -->
			<view class="hot-section">
				<view class="section-title">
					<text class="title-text">热门港口 ({{ popularPorts.length }})</text>
					<text class="title-desc">推荐港口，快速选择</text>
				</view>
				<view class="port-list">
					<view v-if="popularPorts.length === 0" style="padding: 20px; text-align: center; color: #999;">
						<text>正在加载热门港口...</text>
					</view>
					<view class="port-card hot-card" v-for="hp in popularPorts" :key="hp.id">
						<!-- 状态标识 -->
						<view class="port-status-badge" v-if="selectedPort && selectedPort.id === hp.id">
							<text class="status-icon">✓</text>
							<text class="status-text">已选择</text>
						</view>
						
						<view class="hot-card-content">
							<view class="port-avatar"><text class="avatar-icon">港</text></view>
							<view class="port-info">
								<text class="port-name">{{ hp.name }}</text>
								<view class="code-row">
									<text class="code-pill">{{ hp.code }}</text>
								</view>
								<text v-if="hp.country || hp.countryName" class="country-label">{{ hp.country || hp.countryName }}</text>
								<view class="content-row">
									<view class="desc-meta-section">
										<text class="port-desc bubble">{{ hp.description }}</text>
										<view class="meta-row">
											<text class="meta-pill"><text class="dot"></text>{{ hp.region || '华东' }}</text>
											<text class="meta-pill"><text class="dot"></text>{{ hp.timezone ? 'UTC' + (hp.timezone.replace('UTC','').replace('UTC+','+')) : 'UTC+8' }}</text>
										</view>
									</view>
									<view class="services-section">
										<text class="services-title">港口服务</text>
										<view class="service-row">
											<text class="service-chip">仓储服务</text>
											<text class="service-chip">海关服务</text>
											<text class="service-chip">快速物流</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 卡片底部操作按钮 -->
						<view class="card-actions">
							<view class="action-btn favorite-btn" 
								:class="{ 'favorited': isPortFavorited(hp.id) }"
								@click="toggleFavorite(hp, $event)">
								<text class="btn-icon">{{ isPortFavorited(hp.id) ? '⭐' : '☆' }}</text>
								<text class="btn-text">{{ isPortFavorited(hp.id) ? '已收藏' : '收藏' }}</text>
							</view>
							<view class="action-btn main-btn" @click="goToHomeWithPort(hp)">
								<text class="btn-icon">🏠</text>
								<text class="btn-text">选择港口</text>
							</view>
						</view>
					</view>
				</view>
			</view>


		<!-- 底部提示 -->
		<view v-if="isFirstTime" class="bottom-tip">
			<view class="tip-card">
				<text class="tip-icon">💡</text>
				<view class="tip-content">
					<text class="tip-title">温馨提示</text>
					<text class="tip-text">选择目的港后将影响商品价格和运费计算，您可以随时在首页切换目的港。</text>
				</view>
			</view>
		</view>





	</view>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { debounce } from '../../utils/common.js'
import portApi from '../../api/port.js'
import { getCurrentUserId } from '../../utils/userAuth.js'

// 全局状态
const store = inject('$store')

// 响应式数据
const portList = ref([])
const isLoading = ref(false)
const isFirstTime = ref(false)

// 国家与热门港口数据
const countries = ref([])
const currentCountryId = ref(null)
const popularPorts = ref([])

// 收藏相关数据
const favoritePorts = ref([])
const favoritePortIds = ref(new Set())


// 计算属性
const selectedPort = computed(() => store.state.selectedPort)



// 页面加载
onMounted(async () => {
	checkFirstTime()
	
	// 先加载默认的热门港口数据，确保能够显示
	popularPorts.value = getDefaultPorts().filter(p => p.isHot).map(p => ({
		...p,
		country: '中国',
		countryName: '中国',
		region: '华东',
		timezone: 'UTC+8'
	}))
	
	await loadCountries()
	
	// 加载用户收藏的港口
	await loadFavoritePorts()
	
	// 尝试从API加载热门港口，如果失败就保持默认数据
	try {
		await loadPopularPorts()
	} catch (error) {
		console.warn('API加载失败，使用默认数据')
	}
	
	// 如果没有选中的港口且是首次使用，默认加载中国的港口
	if (isFirstTime.value && countries.value.length > 0) {
		const chinaCountry = countries.value.find(c => c.name === '中国' || c.nameEn === 'China')
		if (chinaCountry) {
			currentCountryId.value = chinaCountry.id
			await loadPortList()
		}
	}
})

// 检查是否首次选择
const checkFirstTime = () => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options

	isFirstTime.value = options.first === 'true' || !selectedPort.value
}


// 加载国家列表
const loadCountries = async () => {
	try {
		const resp = await portApi.getCountriesWithPortCount()
		
		let countryList = []
		if (Array.isArray(resp)) {
			countryList = resp
		} else if (resp?.data && Array.isArray(resp.data)) {
			countryList = resp.data
		} else if (resp?.records && Array.isArray(resp.records)) {
			countryList = resp.records
		} else if (resp?.list && Array.isArray(resp.list)) {
			countryList = resp.list
		}
		
		countries.value = countryList
		console.log('解析后的国家列表:', countries.value)
		
		// 如果API返回空数据，使用默认数据
		if (countries.value.length === 0) {
			countries.value = getDefaultCountries()
			console.log('使用默认国家数据:', countries.value)
		}
	} catch (e) {
		console.error('加载国家列表失败', e)
		countries.value = getDefaultCountries()
		console.log('使用默认国家数据:', countries.value)
	}
}

// 选择国家：跳转到国家港口列表页面
const chooseCountry = async (countryId) => {
	console.log('选择国家:', countryId)
	
	const selectedCountry = countries.value.find(c => c.id === countryId)
	const countryName = selectedCountry ? selectedCountry.name : '未知国家'
	
	// 显示选择提示
	uni.showToast({
		title: `已选择${countryName}`,
		icon: 'success',
		duration: 1000
	})
	
	// 跳转到港口选择页面，显示该国家的港口
	setTimeout(() => {
		uni.navigateTo({
			url: `/pages/port/choose?countryId=${countryId}&countryName=${encodeURIComponent(countryName)}`,
			success: () => {
				console.log('跳转到港口选择页面成功')
			},
			fail: (error) => {
				console.error('跳转到港口选择页面失败:', error)
				// 如果跳转失败，回退到原来的逻辑：在当前页面显示港口
				loadCountryPortsInCurrentPage(countryId)
			}
		})
	}, 1000)
}

// 在当前页面显示国家港口的备用方法
const loadCountryPortsInCurrentPage = async (countryId) => {
	// 显示加载提示
	uni.showLoading({
		title: '加载港口中...',
		mask: true
	})
	
	try {
		currentCountryId.value = countryId
		await loadPortList()
		
		// 隐藏加载提示
		uni.hideLoading()
		
		// 如果有港口数据，滚动到港口列表区域
		if (portList.value.length > 0) {
			setTimeout(() => {
				uni.pageScrollTo({
					selector: '.port-list-section',
					duration: 300
				})
			}, 100)
		} else {
			// 如果没有港口数据，显示提示
			uni.showToast({
				title: '该国家暂无可用港口',
				icon: 'none',
				duration: 2000
			})
		}
	} catch (error) {
		uni.hideLoading()
		uni.showToast({
			title: '加载失败，请重试',
			icon: 'none',
			duration: 2000
		})
	}
}

// 加载热门港口
const loadPopularPorts = async () => {
	try {
		const resp = await portApi.getPopularPorts()
		
		let portsList = []
		if (Array.isArray(resp)) {
			portsList = resp
		} else if (resp?.data && Array.isArray(resp.data)) {
			portsList = resp.data
		} else if (resp?.records && Array.isArray(resp.records)) {
			portsList = resp.records
		} else if (resp?.list && Array.isArray(resp.list)) {
			portsList = resp.list
		}
		
		// 只有当API返回有效数据时才替换默认数据
		if (portsList.length > 0) {
			popularPorts.value = portsList.map(p => ({
				id: p.id,
				name: p.name,
				code: p.portCode || p.code,
				description: p.description || '热门港口',
				country: p.countryName || p.country,
				countryName: p.countryName || p.country,
				region: p.region,
				timezone: p.timezone,
				isHot: true
			}))
		}
	} catch (e) {
		console.error('加载热门港口失败', e)
		// 不再重新设置默认数据，因为已经在onMounted中设置了
	}
}

// 加载港口列表（按当前选择的国家）
const loadPortList = async () => {
	try {
		isLoading.value = true
		let list = []
		if (currentCountryId.value) {
			console.log('加载国家港口列表，国家ID:', currentCountryId.value)
			const resp = await portApi.getPortsByCountryId(currentCountryId.value)
			console.log('国家港口API响应:', resp)
			
			let portsRaw = []
			if (Array.isArray(resp)) {
				portsRaw = resp
			} else if (resp?.ports && Array.isArray(resp.ports)) {
				portsRaw = resp.ports
			} else if (resp?.data?.ports && Array.isArray(resp.data.ports)) {
				portsRaw = resp.data.ports
			} else if (resp?.records && Array.isArray(resp.records)) {
				portsRaw = resp.records
			} else if (resp?.list && Array.isArray(resp.list)) {
				portsRaw = resp.list
			}
			
			list = portsRaw
		} else {
			list = []
		}
		
		const toPort = (p) => ({
			id: p.id,
			name: p.name,
			code: p.portCode || p.code,
			description: p.description || '',
			isHot: p.isPopular === 1 || p.isPopular === true || p.isHot === true,
			hasWarehouse: Array.isArray(p.services) ? p.services.some(s=> (s.name||'').includes('仓储')) : !!p.hasWarehouse,
			hasCustoms: Array.isArray(p.services) ? p.services.some(s=> (s.name||'').includes('海关')) : !!p.hasCustoms,
			fastShipping: Array.isArray(p.services) ? p.services.some(s=> (s.name||'').includes('快捷')|| (s.name||'').includes('快速')) : !!p.fastShipping
		})
		
		portList.value = list.map(toPort)
		console.log('解析后的港口列表:', portList.value)

		
		// 如果没有数据，使用默认数据
		if (portList.value.length === 0) {
			if (currentCountryId.value == 1) {
				// 中国港口
				portList.value = getDefaultPorts()
			} else {
				// 其他国家的示例港口
				portList.value = getDefaultPortsForCountry(currentCountryId.value)
			}
			console.log('使用默认港口数据:', portList.value)
		}
	} catch (error) {
		console.error('加载港口列表失败:', error)
		uni.showToast({ title: '加载失败，使用默认数据', icon: 'none' })
		
		// 使用默认数据
		if (currentCountryId.value == 1) {
			portList.value = getDefaultPorts()
		} else {
			portList.value = getDefaultPortsForCountry(currentCountryId.value)
		}
		console.log('使用默认港口数据:', portList.value)
	} finally {
		isLoading.value = false
	}
}

// 获取默认港口数据
const getDefaultPorts = () => {
	return [
		{
			id: 1,
			name: '上海港',
			code: 'CNSHA',
			description: '中国最大的综合性港口，连接全球主要航线',
			isHot: true,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: true
		},
		{
			id: 2,
			name: '深圳港',
			code: 'CNSZX',
			description: '华南地区重要港口，毗邻香港',
			isHot: true,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: true
		},
		{
			id: 3,
			name: '青岛港',
			code: 'CNTAO',
			description: '北方重要港口，服务环渤海地区',
			isHot: false,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: false
		},
		{
			id: 4,
			name: '宁波舟山港',
			code: 'CNNGB',
			description: '长三角地区重要港口，货物吞吐量领先',
			isHot: true,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: true
		},
		{
			id: 5,
			name: '广州港',
			code: 'CNCAN',
			description: '珠三角地区核心港口，历史悠久',
			isHot: false,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: false
		},
		{
			id: 6,
			name: '厦门港',
			code: 'CNXMN',
			description: '东南沿海重要港口，对台贸易枢纽',
			isHot: false,
			hasWarehouse: false,
			hasCustoms: true,
			fastShipping: false
		}
	]
}

// 获取默认国家数据
// 获取其他国家的默认港口数据
const getDefaultPortsForCountry = (countryId) => {
	const portsByCountry = {
		2: [ // 美国
			{
				id: 101,
				name: '洛杉矶港',
				code: 'USLAX',
				description: '美国西海岸最大的港口',
				isHot: true,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: true
			},
			{
				id: 102,
				name: '纽约港',
				code: 'USNYC',
				description: '美国东海岸重要港口',
				isHot: true,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: true
			}
		],
		3: [ // 德国
			{
				id: 201,
				name: '汉堡港',
				code: 'DEHAM',
				description: '德国最大的港口',
				isHot: true,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: true
			},
			{
				id: 202,
				name: '不来梅港',
				code: 'DEBRE',
				description: '德国重要的集装箱港口',
				isHot: false,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: false
			}
		],
		4: [ // 日本
			{
				id: 301,
				name: '东京港',
				code: 'JPTYO',
				description: '日本首都港口',
				isHot: true,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: true
			},
			{
				id: 302,
				name: '横滨港',
				code: 'JPYOK',
				description: '日本重要的国际贸易港',
				isHot: false,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: false
			}
		],
		5: [ // 韩国
			{
				id: 401,
				name: '釜山港',
				code: 'KRPUS',
				description: '韩国最大的港口',
				isHot: true,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: true
			},
			{
				id: 402,
				name: '仁川港',
				code: 'KRICN',
				description: '韩国首都圈港口',
				isHot: false,
				hasWarehouse: true,
				hasCustoms: true,
				fastShipping: false
			}
		]
	}
	
	return portsByCountry[countryId] || [
		{
			id: 999,
			name: '示例港口',
			code: 'DEMO',
			description: '该国家的示例港口',
			isHot: false,
			hasWarehouse: true,
			hasCustoms: true,
			fastShipping: false
		}
	]
}

const getDefaultCountries = () => {
	return [
		{
			id: 1,
			name: '中国',
			nameEn: 'China',
			portCount: 15
		},
		{
			id: 2,
			name: '美国',
			nameEn: 'United States',
			portCount: 8
		},
		{
			id: 3,
			name: '德国',
			nameEn: 'Germany',
			portCount: 6
		},
		{
			id: 4,
			name: '日本',
			nameEn: 'Japan',
			portCount: 5
		},
		{
			id: 5,
			name: '韩国',
			nameEn: 'South Korea',
			portCount: 4
		},
		{
			id: 6,
			name: '新加坡',
			nameEn: 'Singapore',
			portCount: 2
		}
	]
}

// 加载用户收藏的港口
const loadFavoritePorts = async () => {
	try {
		const userId = getCurrentUserId()
		if (!userId) {
			console.log('用户未登录，跳过加载收藏港口')
			return
		}

		const response = await portApi.getUserFavoritePorts(userId)
		
		if (response.code === 200 && Array.isArray(response.data.records)) {
			favoritePorts.value = response.data.records
			// 创建收藏港口ID的Set，用于快速查找
			favoritePortIds.value = new Set(response.data.records.map(port => port.id))
		} else {
			favoritePorts.value = []
			favoritePortIds.value = new Set()
		}
	} catch (error) {
		console.error('加载收藏港口失败:', error)
		favoritePorts.value = []
		favoritePortIds.value = new Set()
	}
}

// 切换收藏状态
const toggleFavorite = async (port, event) => {
	// 阻止事件冒泡，避免触发港口选择
	if (event) {
		event.stopPropagation()
	}

	try {
		const userId = getCurrentUserId()
		if (!userId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}

		const response = await portApi.togglePortFavorite(userId, port.id)
		
		if (response.code === 200) {
			// 更新本地收藏状态
			const isFavorited = response.data.isFavorited
			
			if (isFavorited) {
				// 添加到收藏列表
				if (!favoritePortIds.value.has(port.id)) {
					favoritePorts.value.push({ ...port, isFavorited: true })
					favoritePortIds.value.add(port.id)
				}
			} else {
				// 从收藏列表中移除
				const index = favoritePorts.value.findIndex(p => p.id === port.id)
				if (index !== -1) {
					favoritePorts.value.splice(index, 1)
				}
				favoritePortIds.value.delete(port.id)
			}
			
			uni.showToast({
				title: response.data.message || (isFavorited ? '收藏成功' : '取消收藏'),
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: response.message || '操作失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('收藏操作失败:', error)
		uni.showToast({
			title: '操作失败，请重试',
			icon: 'none'
		})
	}
}

// 检查港口是否已收藏
const isPortFavorited = (portId) => {
	return favoritePortIds.value.has(portId)
}


// 选择港口并跳转到港口商品页面
const goToHomeWithPort = (port) => {
	console.log('开始选择港口并跳转到商品页面:', port)
	
	try {
		// 首先设置选择的港口到全局状态
		store.actions.setSelectedPort(port)
		console.log('设置全局状态完成')
		
		// 存储到本地
		uni.setStorageSync('selectedPort', port)
		console.log('本地存储完成')
		
		// 显示设置成功提示
		uni.showToast({
			title: `已选择${port.name}`,
			icon: 'success',
			duration: 1000
		})
		
		// 跳转到港口商品页面
		setTimeout(() => {
			console.log('开始跳转到港口商品页面')
			uni.navigateTo({
				url: `/pages/port/products?portId=${port.id}&portName=${encodeURIComponent(port.name)}`,
				success: () => {
					console.log('跳转到港口商品页面成功')
				},
				fail: (error) => {
					console.error('跳转到港口商品页面失败:', error)
					uni.showToast({
						title: '跳转失败，请重试',
						icon: 'none',
						duration: 2000
					})
				}
			})
		}, 1000)
	} catch (error) {
		console.error('选择港口过程中出错:', error)
		uni.showToast({
			title: '操作失败，请重试',
			icon: 'none'
		})
	}
}


</script>

<style lang="scss" scoped>
.port-select-container {
	min-height: 100vh;
	background: #F5F5F5;
}



.current-section {
	background: #FFFFFF;
	margin: 15px;
	border-radius: 12px;
	overflow: hidden;
}

.section-title {
	padding: 20px 20px 8px;

	.title-text {
		font-size: 20px;
		font-weight: 700;
		color: #1F2937;
		display: block;
		margin-bottom: 6px;
	}

	.title-desc {
		font-size: 14px;
		color: #6B7280;
		display: block;
		font-weight: 500;
	}
}

.port-list-section {
	flex: 1;
}

.loading-state {
	padding: 50px 0;
}

.empty-state {
	padding: 50px 20px;
}

.port-list {
	/* 统一右侧边距至 6px，与国家列表一致 */
	padding: 0 6px 15px;
}

.port-card {
	background: #FFFFFF;
	border-radius: 16px;
	/* 调整内边距，为顶部按钮留出空间 */
	padding: 20px 24px 28px;
	margin-bottom: 24px;
	min-height: 164px;
	transition: all 0.3s ease;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);

	&.current-port {
		border-color: #3B82F6;
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.05));
		box-shadow: 0 8px 25px rgba(59,130,246,0.15);
	}

	&.port-selected {
		border-color: #3B82F6;
		background: rgba(59, 130, 246, 0.05);
		box-shadow: 0 8px 25px rgba(59,130,246,0.15);
	}

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.08);
		border-color: #D1D5DB;
	}

		&:active {
			transform: scale(0.98);
		}
}

.port-info {
	flex: 1;
}

.port-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;

}

/* 热门港口卡片特有元素 */
.port-avatar{ 
	width: 64px; 
	height: 64px; 
	border-radius: 16px; 
	background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); 
	border: 1px solid #E2E8F0; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: #3B82F6; 
	box-shadow: 0 2px 8px rgba(59,130,246,0.08); 
	flex-shrink: 0; 
}
.avatar-icon{ font-size: 24px; font-weight: 600; }
.code-row{ margin: 8px 0 12px; }
.code-pill{ 
	display: inline-block; 
	padding: 4px 10px; 
	font-size: 12px; 
	border-radius: 12px; 
	background: #F0F9FF; 
	border: 1px solid #BFDBFE; 
	color: #1D4ED8; 
	font-weight: 500;
	letter-spacing: 0.3px; 
}

/* 热门港口视觉强化 */
.hot-card{ position: relative; align-items: flex-start; }
.hot-badge{ 
	position: absolute; 
	top: 12px; 
	right: 16px; 
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); 
	border: 1px solid #F59E0B; 
	border-radius: 14px; 
	padding: 3px 8px; 
	box-shadow: 0 1px 3px rgba(245,158,11,0.2);
}
.hot-badge-text{ font-size: 11px; color: #D97706; font-weight: 600; }
.hot-card .port-name{ margin-bottom: 6px; }
/* 代码行与国家展示 */
.code-row{ margin:6px 0 8px; }
	/* 右上角操作按钮（每个热门港口卡片各自拥有） */
	/* 移除旧的右侧按钮样式 */

.country-label{ font-size: 12px; color: #6B7280; margin: 4px 0 10px; display: block; font-weight: 500; }
/* 元信息（区域/UTC） */
.meta-row{ display: flex; gap: 12px; margin: 12px 0; }
/* 贴近参考图的小胶囊（白底、细描边、圆角较小） */
.meta-pill{ 
	display: inline-flex; 
	align-items: center; 
	gap: 6px; 
	height: 28px; 
	padding: 0 10px; 
	font-size: 12px; 
	color: #374151; 
	background: #F9FAFB; 
	border: 1px solid #D1D5DB; 
	border-radius: 10px; 
	font-weight: 500;
}
/* 胶囊里的小圆形图标 */
.dot{ 
	width: 12px; 
	height: 12px; 
	border-radius: 50%; 
	background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); 
	box-shadow: 0 1px 2px rgba(59,130,246,0.2); 
}
/* 分组层次更清晰 */
.services-title{ 
	margin-top: 0; 
	margin-bottom: 10px; 
	font-size: 13px; 
	color: #6B7280; 
	display: block; 
	font-weight: 600;
}

/* 描述气泡（更克制） */
.port-desc.bubble{ 
	background: #F8FAFC; 
	border: 1px solid #E2E8F0; 
	border-radius: 14px; 
	padding: 14px 16px; 
	margin: 10px 0; 
	color: #475569; 
	font-size: 14px;
	line-height: 1.5;
	box-shadow: none; 
}

/* 内容行布局 - 将描述+元信息与服务信息放在一行 */
.content-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }

/* 描述和元信息部分 */
.desc-meta-section{ flex:1; min-width:200px; }

/* 服务部分 */
.services-section{ flex:1; min-width:200px; }

/* 顶部选择按钮样式 */
.port-action-top{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 16px; }

.select-btn-top{ 
	background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); 
	color: #FFFFFF; 
	padding: 8px 18px; 
	border-radius: 16px; 
	font-size: 12px; 
	font-weight: 600;
	cursor: pointer; 
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(59,130,246,0.2);
}

.select-btn-top .btn-text {
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
}

.select-btn-top:hover{ 
	background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); 
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(59,130,246,0.3);
}

.selected-icon-top{ 
	display: flex; 
	align-items: center; 
	gap: 6px; 
	background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); 
	color: #059669; 
	padding: 8px 16px; 
	border-radius: 16px; 
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(5,150,105,0.15);
}

.selected-icon-top .icon{ 
	font-weight: bold; 
	color: #059669;
	font-size: 12px;
}

.selected-icon-top .selected-text{ 
	font-size: 12px; 
	color: #059669;
	font-weight: 600;
}

/* 热门卡片内容区域 */
.hot-card-content{ display:flex; gap:12px; }

/* 服务胶囊：小而轻，接近参考图 */
.service-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
/*    */
.service-chip{ 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	flex: 0 0 auto; 
	min-width: 88px; 
	height: 32px; 
	padding: 0 12px; 
	font-size: 12px; 
	font-weight: 500;
	color: #3B82F6; 
	background: #F0F9FF; 
	border: 1px solid #BFDBFE; 
	border-radius: 16px; 
	white-space: nowrap; 
	transition: all 0.2s ease;
}

.service-chip:hover {
	background: #EBF8FF;
	border-color: #93C5FD;
	transform: translateY(-1px);
}


.port-name {
	font-size: 20px;
	font-weight: 700;
	color: #1F2937;
	margin-bottom: 2px;
}

.hot-tag {
	background: linear-gradient(45deg, #ff6b6b, #feca57);
	border-radius: 10px;
	padding: 2px 8px;

	.hot-text {
		font-size: 10px;
		color: #FFFFFF;
		font-weight: bold;
	}
}

.port-code {
	font-size: 14px;
	color: #6B7280;
	margin-bottom: 10px;
	display: block;
	font-weight: 500;
}

.port-desc {
	font-size: 14px;
	color: #4B5563;
	line-height: 1.6;
	margin-bottom: 14px;
	display: block;
}

.port-features {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.feature-tag {
	background: #E3F2FD;
	color: var(--primary-color);
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 12px;
	font-weight: 500;
}

/* 旧的右侧按钮容器样式已移除 */

.port-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;

	.status-icon {
		width: 24px;
		height: 24px;
		background: var(--primary-color);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 14px;
		font-weight: bold;
	}

	.status-text {
		font-size: 12px;
		color: var(--primary-color);
		font-weight: 500;
	}
}

/* 旧的右侧选中图标样式已移除 */

/* 旧的右侧选择按钮样式已移除 */

.bottom-tip {
	padding: 15px;
}

.tip-card {
	background: #FFF3CD;
	border-radius: 12px;
	padding: 15px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.tip-icon {
	font-size: 20px;
	flex-shrink: 0;
}

.tip-content {
	flex: 1;
}

.tip-title {
	font-size: 16px;
	font-weight: 600;
	color: #856404;
	margin-bottom: 4px;
	display: block;
}

.tip-text {
	font-size: 14px;
	color: #856404;
	line-height: 1.5;
	display: block;
}

// 国家列表样式
.country-section {
	background:#FFFFFF;
	margin:15px;
	border-radius:12px;
	overflow:hidden;
	.country-list { padding: 10px 15px 16px; }
	.country-item { display:flex; justify-content:flex-start; align-items:center; gap:16px; padding:14px 6px 14px 16px; margin:10px 0; background:#FFFFFF; border:1px solid #EEF2F7; border-radius:14px; box-shadow:0 6px 18px rgba(17,24,39,0.06); }
	.country-left { display:flex; gap:14px; align-items:center; }
	.country-avatar { width:44px; height:44px; border-radius:22px; background:#F7F9FE; display:flex; align-items:center; justify-content:center; color:#333; font-weight:600; font-size:16px; box-shadow:0 8px 16px rgba(17,24,39,0.08); }
	.country-info { display:flex; flex-direction:column; }
	.country-name { font-size:16px; font-weight:600; color:#333; }
	.country-name-en { font-size:12px; color:#8A8F98; text-transform: uppercase; letter-spacing: .3px; }
	.country-sub { font-size:12px; margin-top:6px; align-self:flex-start; color:#2563EB; background:#FFFFFF; border:1px solid #E5EDFF; border-radius:999px; padding:2px 8px; }
	.country-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; color:#fff; border:none; height:36px; line-height:36px; padding:0 18px; min-width:76px; font-size:14px; font-weight:700; border-radius:18px; background:linear-gradient(180deg,#5EA1FF 0%, #2F6BFF 100%); box-shadow:0 10px 20px rgba(47,107,255,0.22), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.08); margin-left:auto; margin-right:0; flex:0 0 auto; transition:transform .06s ease, filter .12s ease, box-shadow .12s ease; overflow:hidden; }
	.country-btn::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.00) 60%); }
	.country-btn:active { transform:translateY(1px); box-shadow:0 6px 14px rgba(47,107,255,0.20), inset 0 0 0 rgba(0,0,0,0); filter:brightness(0.98); }
}

.hot-section {
	background:#FFFFFF;
	margin:15px;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 4px 16px rgba(17,24,39,0.04);
}



/* 港口状态标识 */
.port-status-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
	border: 1px solid #10B981;
	border-radius: 12px;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 1px 3px rgba(16,185,129,0.2);
	z-index: 2;
}

.port-status-badge .status-icon {
	font-size: 12px;
	color: #059669;
	font-weight: bold;
}

.port-status-badge .status-text {
	font-size: 11px;
	color: #047857;
	font-weight: 600;
}

/* 卡片操作按钮容器 */
.card-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
}

/* 操作按钮基础样式 */
.action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	outline: none;
}

/* 查看商品按钮样式 */
.main-btn {
	background: linear-gradient(135deg, #FEF3E2 0%, #FED7AA 100%);
	border: 1px solid #F97316;
	color: #EA580C;
}

.main-btn:active {
	transform: translateY(1px);
	background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
}

.main-btn .btn-icon {
	font-size: 16px;
}

.action-btn .btn-text {
	font-size: 14px;
	font-weight: 600;
}

/* 收藏按钮样式 */
.favorite-btn {
	background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
	border: 1px solid #CBD5E1;
	color: #64748B;
}

.favorite-btn.favorited {
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
	border: 1px solid #F59E0B;
	color: #D97706;
}

.favorite-btn:active {
	transform: translateY(1px);
}

.favorite-btn .btn-icon {
	font-size: 16px;
}

/* 小收藏按钮样式 */
.favorite-btn-small {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
	border: 1px solid #CBD5E1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.favorite-btn-small.favorited {
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
	border: 1px solid #F59E0B;
}

.favorite-btn-small:active {
	transform: translateY(1px);
}

.favorite-btn-small .favorite-icon {
	font-size: 16px;
	color: #64748B;
}

.favorite-btn-small.favorited .favorite-icon {
	color: #D97706;
}
</style>